<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@include file="/WEB-INF/views/header.jsp" %>
    <script>
        $("#main_nav").addClass("active")
    </script>
    <title>微学习</title>

    <link rel="stylesheet" href="${base}/plugins/dropload/dropload.css">
    <script src="${base}/plugins/dropload/dropload.min.js"></script>

    <%--layui--%>
    <link rel="stylesheet" type="text/css" href="${base}/css/conversation/font_Icon/iconfont.css">
    <link rel="stylesheet" type="text/css" href="${base}/css/conversation/chat.css">

    <style>
        .data-content .content { /*强制文本在一行内显示*/
            /*white-space:nowrap;*/
            width: 90% !important;
            /*溢出内容为隐藏*/
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            /*-moz-binding:url('ellipsis.xml#ellipsis');*/
            padding: 20px;
            margin: 10px 5px;
        }

        .article-item {
            margin-top: 20px;
        }

        .article-item .content {
            line-height: 20px;
            max-height: 200px;
        }

        .article-item .content {
            /*溢出内容为隐藏*/
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

        .content p {
            margin-bottom: 20px !important;
        }

        .data-content h1 {
            color: #29B4F0;
            text-decoration: none;
            font-size: 30px;
        }

        .node-header {
            font-size: 15px;
            color: #ccc;
        }

    </style>
</head>
<body style="min-height: 100%">

<div class="d-flex" style="background-color: #eeeeee">
    <div style="" class="col-md-12">
        <div class="p-3 m-3" id="searchAll">
            <div>
                <div class="input-group mb-3">
                    <input type="text" name="key" v-model="key" @keyup.enter="search" class="form-control"
                           id="search_input"
                           placeholder="关键字" autofocus>
                    <div class="input-group-append">
                        <span class="input-group-text">提交</span>
                    </div>
                </div>
            </div>
            <div id="content" class="layui-row" style="min-height: 308px;">
                <div class="layui-tab layui-tab-brief" lay-filter="searchFilter">
                    <ul class="layui-tab-title">
                        <li class="layui-this">文章</li>
                        <li>大纲</li>
                        <li>教师</li>
                        <li>学生</li>
                    </ul>
                    <div class="layui-tab-content" style="">
                        <%--文章开始--%>
                        <div class="layui-tab-item layui-show">

                            <div class="data-content" style="padding:0 10px; ">
                                <div v-for="article in articles" class="article-item card p-2">
                                    <h1>{{article.article_title}}</h1>
                                    <div class="d-flex node-header">
                                        <div>
                                            <span>作者：{{article.author.te_name}}</span>&nbsp;&nbsp;
                                            <span>日期：{{article.releaseTime}}</span>&nbsp;&nbsp;
                                            <span class="icon"> &#xe662; {{article.article_zan}}</span>&nbsp;&nbsp;
                                            <span class="icon"> &#xe71b; {{article.article_read_count}}</span>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <div class="content" v-html="article.article_content"></div>
                                        <div style="height: 20px;"></div>

                                        <a v-bind:href="'${base}/article/detail?id='+article.article_id"
                                           class="card-link">阅读全文</a>
                                    </div>

                                </div>
                            </div>

                        </div>
                        <%--文章结束--%>

                        <%--大纲开始--%>
                        <div class="layui-tab-item">
                            <div class="layui-card layui-col-md5" style="margin:10px;" v-for="o in outlines">
                                <div class="layui-card-header" style="display: flex;">
                                    <div style="font-weight: bold;">{{o.o_name}}</div>
                                    <div style="display: flex;margin-left: auto;"><a
                                            v-bind:href="'${base}/catalog/articles?outlineId='+o.o_id">相关文章</a></div>
                                </div>
                                <div class="layui-card-body">
                                    <p><span>{{o.grade.grade_name}}</span> / <span>{{o.subject.subject_name}}</span></p>
                                </div>
                            </div>
                        </div>
                        <%--大纲结束--%>

                        <%--教师开始--%>
                        <div class="layui-tab-item">
                            <table class="layui-table">
                                <colgroup>
                                    <col width="150">
                                    <col width="200">
                                    <col>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>头像</th>
                                    <th>真实姓名</th>
                                    <th>登录名称</th>
                                    <th>所在学校</th>
                                    <th>年龄</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="t in teachers">
                                    <td><img v-bind:src="'${base}'+t.te_image"
                                             style="width:60px; height: 60px; border-radius: 50%"/></td>
                                    <td>{{t.te_name}}</td>
                                    <td>{{t.te_login_name}}</td>
                                    <td>{{t.school.school_name}}</td>
                                    <td>{{t.te_age}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <%--教师结束--%>

                        <%--学生开始--%>
                        <div class="layui-tab-item">
                            <table class="layui-table">
                                <colgroup>
                                    <col width="150">
                                    <col width="200">
                                    <col>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>真实姓名</th>
                                    <th>登录名称</th>
                                    <th>私聊</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="s in students">
                                    <td>{{s.stu_name}}</td>
                                    <td>{{s.stu_login_name}}</td>
                                    <td><a href="#" v-on:click="sendMsg(s.stu_id)">私聊</a></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <%--学生结束--%>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

<%@include file="footer.jsp" %>
</body>

<!-- 模态框 -->
<div class="modal fade" id="myModal" style="height: 620px;">
    <div class="modal-dialog" style="height: 620px !important;">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">我的消息</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body" style="" id="msg-modal">
                <div class="" id="chat">
                    <div class="chatBox-content">
                        <div class="chatBox-content-demo" id="chatBox-content-demo">

                            <div style="align-content: center">
                                <a href="${base}/conversation/history"
                                   style="font-size: 13px; color:dodgerblue">查看历史记录</a>
                            </div>
                            <div class="clearfloat" v-for="item in content">
                                <div class="author-name">
                                    <small class="chat-date">{{item.msgTime}}</small>
                                </div>
                                <div v-bind:class="item.dir">
                                    <div v-if="item.dir=='left'" class="chat-avatars"><img
                                            v-bind:src="'/student'+item.image" alt="头像"/></div>
                                    <div class="chat-message">
                                        {{item.text}}
                                    </div>
                                    <div v-if="item.dir=='right'" class="chat-avatars"><img
                                            v-bind:src="'${base}'+item.image" alt="头像"/></div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="chatBox-send">
                        <div class="div-textarea" contenteditable="true"></div>
                        <div>
                            <button id="chat-fasong" v-on:click="send" class="btn-default-styles"><i
                                    class="iconfont icon-fasong"></i>
                            </button>
                        </div>

                        <div class="biaoqing-photo">
                            <ul>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>
<%--<script src="${base}/js/index.js"></script>--%>

<script>
    keyword = '${key}';
    imageUrl = '${sessionScope.teacher.te_image}';
</script>
<script src="${base}/js/search.js"></script>


</html>
